<script lang="ts" setup>
import type { Course } from '@/request/types'

defineProps<{
  course: Course
}>()

const bulbIcon =
  ''

const getOperTypeIcon = (type: string) => {
  switch (type) {
    case '查阅':
      return ''
    case '展示':
      return ''
    case '刷题':
      return '/static/img/guidelineST-hover.d8eba185.png'
    case '上传':
      return '/static/img/upload-hover.6b71e3cb.png'
    default:
      return ''
  }
}
</script>

<template>
  <div class="max-w-[835px] m-8">
    <el-card body-class="flex flex-col">
      <span>简介：{{ course.currDesc }}</span>
      <span>课程目标：{{ course.courseData.goal }}</span>
    </el-card>

    <el-collapse class="mt-6">
      <!--   最外层折叠面板 - 任务组   -->
      <el-card
        v-for="taskGround in Object.values(course.courseData.taskGroups).sort(
          (a, b) => a.groupNoInCourse - b.groupNoInCourse
        )"
        :key="taskGround.name"
        class="mb-5"
      >
        <el-collapse-item>
          <template #title>
            <img :src="bulbIcon" alt="icon" class="mr-2" />
            <el-avatar :src="taskGround.iconPath" class="mr-3" />
            <span class="text-base font-black">{{ taskGround.name }}</span>
          </template>
          <!--     每个任务     -->
          <el-collapse
            v-for="task in Object.values(taskGround.tasks).sort(
              (a, b) => a.taskNoInGroup - b.taskNoInGroup
            )"
            :key="task.name"
          >
            <el-card class="mt-5">
              <el-collapse-item>
                <template #title>
                  <el-avatar :size="32" :src="task.iconPath" class="mr-2" />
                  <span class="text-base font-black">{{ task.name }}</span>
                </template>
                <!--     任务中的引导       -->
                <div v-if="task.description">简介：<span v-html="task.description"></span></div>
                <div v-if="task.goal">目标：<span v-html="task.goal"></span></div>

                <!--     任务中的操作       -->
                <div
                  v-for="guide in Object.values(task.guidelines).sort(
                    (a, b) => a.noInTask - b.noInTask
                  )"
                  :key="guide.noInTask"
                  class="guidelines mt-4 text-sm pb-3 border-b tracking-wider"
                >
                  <div class="flex">
                    <img :src="getOperTypeIcon(guide.operType)" alt="icon" class="h-7 text-black" />
                    <span v-html="guide.description"></span>
                  </div>
                </div>
              </el-collapse-item>
            </el-card>
          </el-collapse>
        </el-collapse-item>
      </el-card>
    </el-collapse>
  </div>
</template>

<style scoped>
.guidelines :deep(a) {
  color: #409eff;
  text-decoration: underline;
}

:deep(.el-collapse .el-avatar) {
  background-color: transparent;
}

:deep(.el-collapse-item__header) {
  font-size: 1.5em;
}

:deep(.el-collapse) {
  border-bottom: 0;
  border-top: 0;
}
</style>
